<template>
  <el-form ref="ruleFormRef" :rules="rules" :model="form" label-width="auto" style="max-width: 600px">
    <el-form-item label="访问路径" prop="path">
      <el-input v-model="form.path" placeholder="如:/home" />
    </el-form-item>
    <el-form-item label="名称" prop="name">
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item label="组件路径" prop="component">
      <el-input v-model="form.component" placeholder="如:home/index.vue，如框架直接填写Layout" />
    </el-form-item>

    <el-form-item label="是否为根路由">
      <el-switch v-model="isRoot" @change="isRoot ? form.parent_id = 0 : isRoot" />
    </el-form-item>
    <el-form-item label="父路由" v-show="!isRoot" prop="parent_id">
      <el-select v-model="form.parent_id" placeholder="请选择">
        <el-option v-for="i in currentRoutes" :label="i.path" :value="i.id" />
      </el-select>
    </el-form-item>

    <el-form-item label="是否重定向">
      <el-switch v-model="isRedirect" @change="!isRedirect ? form.redirect = '' : isRedirect" />
    </el-form-item>
    <el-form-item label="重定向路径" v-show="isRedirect" prop="redirect">
      <el-input v-model="form.redirect" />
    </el-form-item>

    <el-form-item label="页面标题" prop="title">
      <el-input v-model="form.title" />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit(ruleFormRef)">添加</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import useRouteStore from '@/stores/modules/routes'
import { useRoute } from 'vue-router'
const routeStore = useRouteStore()
const route = useRoute()

let currentRoutes = ref([])
let isRoot = ref(true)
let isRedirect = ref(false)
const ruleFormRef = ref()
const form = reactive({
  path: '',
  name: '',
  component: '',
  redirect: '',
  parent_id: 0,
  title: '',
})

const ValidatorPath = (rule, value, callback) => {
  let result = value.startsWith('/')
  if (!result) {
    callback(new Error('路径必须以/开头'))
  } else {
    callback()
  }
}
const ValidatorComponent = (rule, value, callback) => {
  let result = value.endsWith('.vue')
  if (result || value === 'Layout') {
    callback()
  } else {
    callback(new Error('组件路径必须以.vue结尾或填写Layout'))

  }
}
const rules = reactive({
  path: [
    { required: true, message: '访问路径必须填写', trigger: 'blur' },
    { min: 2, message: '路径不得小于2个字符', trigger: 'blur' },
    { validator: ValidatorPath, trigger: 'blur' }
  ],
  name: [
    { required: true, message: '名称必须填写', trigger: 'change', },
  ],
  component: [
    { required: true, message: '组件路径必须填写', trigger: 'change', },
    { validator: ValidatorComponent, trigger: 'blur' }
  ],
  title: [
    { required: true, message: '标题必须填写', trigger: 'change', },
  ]
})

onMounted(() => {
  routeStore.getRoutes(true).then(r => {
    currentRoutes.value = r
  })
  if (route.query['pid']) {
    isRoot.value = false
    form.parent_id = parseInt(route.query.pid);
  }
})

const onSubmit = async (formEl) => {
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      let result = await routeStore.addRoute(form)
      if (result && result.code == 200) {
        window.location.reload()
      }
      console.log(result, form)
    } else {
      console.log('error submit!', fields)
    }
  })
}
</script>

<style lang="scss" scoped>
:deep(.el-form-item__label){
    color:#fefefe;
}
</style>